<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)">
			<view slot="navbar-center">弹出层</view>
		</w-navbar>

		<w-popup v-model="top" mode="top"></w-popup>
		<w-popup v-model="bottom" mode="bottom"></w-popup>
		<w-popup v-model="left" mode="left"></w-popup>
		<w-popup v-model="right" mode="right"></w-popup>

		<pageDemoBlock title="基本用法" color="#1c87e4">
			<view class="m-b-2">
				<w-button  @click="popupShow('top')">上侧弹出</w-button>
			</view>
			<view class="m-b-2">
				<w-button  @click="popupShow('bottom')">下侧弹出</w-button>
			</view>
			<view class="m-b-2">
				<w-button  @click="popupShow('left')">左侧弹出</w-button>
			</view>
			<w-button  @click="popupShow('right')">右侧弹出</w-button>
		</pageDemoBlock>



	</view>
</template>

<script>
	import pageDemoBlock from '@/components/page-demo-block';
	export default {
		components: {
			pageDemoBlock
		},
		data() {
			return {
				top:false,
				bottom:false,
				left:false,
				right: false,
			};
		},
		methods: {
			popupShow(mode) {
				this[mode] = true
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
